import React, { Component } from "react";
import { Layout, message } from "antd";
import "./dashboard.scss";
import { Row, Col, Icon, Menu, Dropdown, Avatar } from "antd";
import loginService from "../login/LoginService";
import { observable, runInAction } from "mobx";
import { observer } from "mobx-react";
import { WithTranslation, withTranslation } from 'react-i18next';

interface Props extends WithTranslation {
  onClickMenuFold: Function;
  menuFoldType: string;
}

@observer
class DashboardHeader extends Component<Props> {
  @observable user: any = {};

  constructor(props: Readonly<Props>) {
    super(props);
  }

  componentDidMount() {
    const { t } = this.props;
    loginService.userInfo().then((res: any) => {
      if (res.status === 0) {
        runInAction(() => {
          this.user = res.data;
        });
      } else {
        message.error(`${t('error.userInfo')}`);
      }
    });
  }

  render() {
    const { t } = this.props;

    const menu = (
      <Menu className="header-dropdown-menu">
        <Menu.Item>
          <a>
            <Icon type="profile" theme="filled" />
            {t('header.profile')}
          </a>
        </Menu.Item>
        <Menu.Item>
          <a>
            <Icon type="mail" theme="filled" />
            {t('header.mail')}
          </a>
        </Menu.Item>
        <Menu.Divider />
        <Menu.Item>
          <a>
            <Icon type="logout" />
            {t('header.logout')}
          </a>
        </Menu.Item>
      </Menu>
    );

    return (
      <Layout.Header className="dashboard-header">
        <Row>
          <Col span={4}>
            <div>
              <Icon
                type={this.props.menuFoldType}
                className="menu-collapsed"
                onClick={() => {
                  this.props.onClickMenuFold();
                }}
              />
            </div>
          </Col>
          <Col span={18} />
          <Col span={2}>
            <Dropdown overlay={menu} trigger={["click"]}>
              <div>
                <Avatar
                  size={32}
                  icon="user"
                  src={
                    this.user.photoImg
                  }
                  style={{ marginRight: "5px" }}
                />
                <a className="ant-dropdown-link profile-dropdown" href="#">
                  {this.user.nickName} <Icon type="down" />
                </a>
              </div>
            </Dropdown>
          </Col>
        </Row>
      </Layout.Header>
    );
  }
}

export default withTranslation()(DashboardHeader);
